import React from 'react'
import Nav from '../nav'
import ImgTxt from '../imgtxt' 
import style from './style'
import cx from 'classnames'
import util from '../../util'

export default ({ subNavTitle, subNavs, account,icon, navClass, className, children, navs, item, ...others, avatar }) => (
	<div className={cx({
    [style.root]:true,
    [className]: className,
		[style.hasAvatar]: avatar,
    [style.hasAccount]: account
  })}>
		{
			avatar? (
				<div 
					className={style.avatar}
					style={{
						backgroundImage: `url(${avatar})`
					}}
				/>
			): null
		}
    {
      account? (
        <ImgTxt
          className={style.account}
          {...account}
        />
      ): null
    }
		<Nav 
      data-sub-role="nav"
			icon={icon}
			className={cx({
        [style.nav]: true,
        [navClass]: navClass
      })}
			data={navs} 
			item={item}
		/>
    {
      (!util.isNull(subNavs) && !util.isNull(subNavs[0]))?
      <div
        data-sub-role="sub-nav"
      >
        {
          subNavTitle?
          <h2>{ subNavTitle }</h2>
          : null
        }
        <Nav
          data={subNavs}
          item={item}
        />
      </div>: null
    }
		<div className={style.content}>
			{ 
				React.Children.map(children, (child) => (
					React.cloneElement(child, {
						...others
					})
				))
			}
		</div>
	</div>
)
